<template>
  <Dialog
    width="650px"
    :title=title
    :visible.sync="innerVisible">
    <div>
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="12" :offset="3">请选择取消订单的原因：</el-col>
        </el-row>

        <el-form-item label="" lable-width="80px">
          <el-radio-group v-model="form.reason">
            <el-row style="margin:20px 0" v-for="item in reasonArr" :key="item.value">
              <el-col :span="24" >

                <el-radio :label="item.text" v-if="item.value!== 'FHBCANCELORDERREASON7'">{{item.text}}</el-radio>

                <!--如果选中的是第7个，那么取reason时 就要重新赋一下值：赋新值给reason-->
                <el-radio label="FHBCANCELORDERREASON7" v-if="item.value === 'FHBCANCELORDERREASON7'">
                  <el-input v-model="form.reasonInput" placeholder="输入其他原因"></el-input>
                </el-radio>

              </el-col>
            </el-row>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="innerVisible = false">关闭窗口</el-button>
      <el-button type="primary" :loading="loading" @click="submit">确认取消</el-button>
    </span>
  </Dialog>
</template>
<script>
import {unixTimestampFilter} from '@/filters'
import {copy, dotData} from '@/utils'
export default {
  name: 'modalRefund',
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    cancelId: {
      type: Array,
      required: true
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.form.reasonInput = ''
      this.form.reason = ''
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }
  },
  filters: {
    unixTimestampFilter
  },
  data() {
    return {
      innerVisible: this.visible,
      loading: false,
      title: '取消订单后，订单将回收至订单池中已取消列表，可重新编辑并且再次下单',
      form: {
        reasonInput: '',
        reason: ''
      },
      reasonArr: []
    }
  },
  created() {
    // 取消原因 字典接口单独请求 并格式化
    this.$ajax.get('/ms-fahuobao-order/FhbOrder/findCancelOrderReason').then(response => {
      let temp = []
      const data = dotData(response, 'data')
      if (Array.isArray(data)) {
        data.forEach(v => {
          temp.push({value: v.code, text: v.name})
        })
      }
      this.reasonArr = temp
    })
  },
  methods: {
    submit($event) {
      if (!this.form.reason) {
        alert('请选择或输入其他原因')
      } else {
        let data = copy(this.form, true)
        let postData = {}
        if (data.reason === 'FHBCANCELORDERREASON7') {
          // 如果选中的值是07，且输入框里有值，那么就要重新赋新值
          if (this.form.reasonInput === '') {
            alert('请填写其他原因')
            return false
          } else {
            if (this.form.reasonInput.length > 30) {
              alert('其他原因最多30字')
              return false
            } else {
              postData.reason = data.reasonInput
            }
          }
        } else { // 如果选中的是其他项 01~06项，那么直接取里面的值
          postData.reason = data.reason
        }
        postData.orderId = this.cancelId
        this.loading = true
        this.$ajax.post('/ms-fahuobao-order/FhbOrder/cancelOrderData', postData).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            this.$confirm('已取消订单', '提示', {
              type: 'success',
              center: true,
              confirmButtonText: '确定',
              showCancelButton: false,
              closeOnClickModal: false
            }).then(_ => {
              this.$router.push({path: '/redirect/ss-fhb/myOrders/offering/index'})
            })
          }
          this.loading = false
        }).catch(_ => {
          this.loading = false
        })
      }
    }
  }
}
</script>
